<template>
	<view class="container-main">
		<ikz-loading :css-data="loading_css"></ikz-loading>
		<view class="ikz-top-bg">
			<image class="ikz-top-bg-img" :src="service_img"></image>
		</view>
		<view class="title_txt">
			<view class="left_box">
				<view class="tab-item" v-for="(item,index) in yuelist" :key="index" @click="hah(item,index)">
					<view :class="['tab-item', { selected: selectedIndices == index ? 'selected':''}]">
						{{ item.cate_name }}
					</view>
				</view>
			</view>

			<image src="/static/supermarket/index/mar_search.png" @click="tosearch" style="width: 68rpx;height: 58rpx;"
				mode=""></image>
		</view>

		<!-- tab -->
		<view class="tabbox" v-if="selectedIndices == 0">
			<view class="le-box">
				<view class="tab-item" v-for="(item,index) in tablist" :key="index" @click="tabhah(item,index)">
					<view :class="['tab-item', { selected: selectedIndices1 == index ? 'selected':''}]">
						{{ item.cate_name }}
					</view>
				</view>
			</view>

			<image src="/static/supermarket/index/mar_set.png" @click="poppei" style="width: 44rpx;height: 44rpx;"
				mode=""></image>
		</view>
		
		<view class="tabbox1" v-if="selectedIndices == 1">
			<view class="le-box">
				<view class="tab-item" v-for="(item,index) in tablist1" :key="index" @click="tab1hah(item,index)">
					<view :class="['tab-item', { selected: selectedIndiceslisi == index ? 'selected':''}]">
						{{ item.cate_name }}
					</view>
				</view>
			</view>
		
			<image src="/static/supermarket/index/mar_set.png" @click="poppei" style="width: 44rpx;height: 44rpx;"
				mode=""></image>
		</view>


		<!-- 内容区 -->
		<scroll-view scroll-y :style="{ height: windowHeight }" @scrolltolower="onreachBottom">
			<view class="main-box" v-if="selectedIndices1 == 0">
				<view class="topbox">
					<view class="left-box">
						<view class="num-txt">
							<text style="color: #FF4F21;font-size: 28rpx;">#</text>16
						</view>
						<view class="song" v-if="code != 2">
							立即送达
						</view>
						<view class="song" v-if="selectedIndices1 == 1 && code == 2 && selectedIndices2 != 1">
							到店自取
						</view>
						<view class="song" v-if="selectedIndices2 == 1 && selectedIndices1 == 1">
							18：30前送达
						</view>
					</view>
					<view class="status-txt" v-if="selectedIndices1 == 0">
						待接单
					</view>
					<view class="status-txt" v-if="selectedIndices1 == 1 && code == 0">
						待跑腿接单
					</view>
					<view class="status-txt" style="color: #247EFF;" v-if="selectedIndices1 == 1 && code == 1">
						配送中
					</view>
					<view class="status-txt" v-if="selectedIndices1 == 1 && code == 2">
						待顾客取货
					</view>
					<view class="status-txt" v-if="selectedIndices2">
						商家自配
					</view>
				</view>

				<view class="address-info">
					<view class="left-box">
						<view class="tt-txt">
							<view class="nicknametxt">
								马女士
							</view>
							<view class="numtxt">
								尾号3258
							</view>
						</view>
						<view class="bb-txt" v-if="code == 1 || code == 0">
							<view class="add-txt">
								收货地址 |
							</view>
							<view class="address-t">
								教学楼 3号教学楼 306
							</view>
						</view>
					</view>
					<view class="img-box">
						<image src="/static/supermarket/index/duanxin.png" style="width: 50rpx;height: 50rpx;" mode="">
						</image>
						<image src="/static/supermarket/index/phone-icon.png" style="width: 50rpx;height: 50rpx;"
							mode="">
						</image>
					</view>
				</view>
				<view class="beizubox">
					<view class="paotui" v-if="selectedIndices1 == 1 && code == 1">
						<view class="left-box">
							<view class="tt-txt">
								<view class="nicknametxt">
									跑腿已接单
								</view>
							</view>
							<view class="bb-txt">
								<view class="add-txt">
									王大帅
								</view>
							</view>
						</view>
						<view class="img-box">
							<image src="/static/supermarket/index/duanxin.png" style="width: 50rpx;height: 50rpx;"
								mode="">
							</image>
							<image src="/static/supermarket/index/phone-icon.png" style="width: 50rpx;height: 50rpx;"
								mode="">
							</image>
						</view>
					</view>
					<view class="textbox">
						<view class="tips-text">备注：</view>
						<view class="note-txt">
							我是广东来的，大哥们行行好不要放辣椒!我怕我怕我怕我吃不得我吃不得我吃不得求求你
						</view>
					</view>
					<view class="bombox">
						<view class="num-s">
							12件商品
						</view>
						<view class="yuji">
							预计收入 ￥21.23
						</view>
					</view>
					<view class="dingdaninfo">
						<view class="left-box">
							牛肉面单人餐(小份)
						</view>
						<view class="right-box">
							<view class="cheng">
								x1
							</view>
							<view class="price">
								￥15
							</view>
						</view>
					</view>
				</view>

				<view class="btn-box">
					<view class="top-box">
						<view class="l-b">
							<view class="xidan-txt">
								下单时间 12-05 11:45
							</view>
							<view class="dingdan-txt">
								订单单号 12545435434134 复制
							</view>
						</view>
						<view class="r-b">
							<view class="tips">
								展开信息
							</view>
							<image src="/static/supermarket/index/xia_icon.png" style="width: 12rpx;height: 6rpx;"
								mode="">
							</image>
						</view>
					</view>
				</view>
				<view class="btn-btn" v-if="selectedIndices1 != 1">
					<view class="btn1">
						取消订单
					</view>
					<view class="jiedan">
						接单
					</view>
				</view>
				<view class="btn-btn1" v-else>
					<view class="btn1">
						顾客已取餐
					</view>
				</view>
			</view>
			
			<view class="main-box" v-if="selectedIndices1 == 1">
				<view class="topbox">
					<view class="left-box">
						<view class="num-txt">
							<text style="color: #FF4F21;font-size: 28rpx;">#</text>16
						</view>
						<view class="song" v-if="code != 2">
							立即送达
						</view>
						<view class="song" v-if="selectedIndices1 == 1 && code == 2 && selectedIndices2 != 1">
							到店自取
						</view>
						<view class="song" v-if="selectedIndices2 == 1 && selectedIndices1 == 1">
							18：30前送达
						</view>
					</view>
					<view class="status-txt" v-if="selectedIndices1 == 0">
						待接单
					</view>
					<view class="status-txt" v-if="selectedIndices1 == 1 && code == 0">
						待跑腿接单
					</view>
					<view class="status-txt" style="color: #247EFF;" v-if="selectedIndices1 == 1 && code == 1">
						配送中
					</view>
					<view class="status-txt" v-if="selectedIndices1 == 1 && code == 2">
						待顾客取货
					</view>
					<view class="status-txt" v-if="selectedIndices2">
						商家自配
					</view>
				</view>
			
				<view class="address-info">
					<view class="left-box">
						<view class="tt-txt">
							<view class="nicknametxt">
								马女士
							</view>
							<view class="numtxt">
								尾号3258
							</view>
						</view>
						<view class="bb-txt" v-if="code == 1 || code == 0">
							<view class="add-txt">
								收货地址 |
							</view>
							<view class="address-t">
								教学楼 3号教学楼 306
							</view>
						</view>
					</view>
					<view class="img-box">
						<image src="/static/supermarket/index/duanxin.png" style="width: 50rpx;height: 50rpx;" mode="">
						</image>
						<image src="/static/supermarket/index/phone-icon.png" style="width: 50rpx;height: 50rpx;"
							mode="">
						</image>
					</view>
				</view>
				<view class="beizubox">
					<view class="paotui" v-if="selectedIndices1 == 1 && code == 1">
						<view class="left-box">
							<view class="tt-txt">
								<view class="nicknametxt">
									跑腿已接单
								</view>
							</view>
							<view class="bb-txt">
								<view class="add-txt">
									王大帅
								</view>
							</view>
						</view>
						<view class="img-box">
							<image src="/static/supermarket/index/duanxin.png" style="width: 50rpx;height: 50rpx;"
								mode="">
							</image>
							<image src="/static/supermarket/index/phone-icon.png" style="width: 50rpx;height: 50rpx;"
								mode="">
							</image>
						</view>
					</view>
					<view class="textbox">
						<view class="tips-text">备注：</view>
						<view class="note-txt">
							我是广东来的，大哥们行行好不要放辣椒!我怕我怕我怕我吃不得我吃不得我吃不得求求你
						</view>
					</view>
					<view class="bombox">
						<view class="num-s">
							12件商品
						</view>
						<view class="yuji">
							预计收入 ￥21.23
						</view>
					</view>
					<view class="dingdaninfo">
						<view class="left-box">
							牛肉面单人餐(小份)
						</view>
						<view class="right-box">
							<view class="cheng">
								x1
							</view>
							<view class="price">
								￥15
							</view>
						</view>
					</view>
				</view>
			
				<view class="btn-box">
					<view class="top-box">
						<view class="l-b">
							<view class="xidan-txt">
								下单时间 12-05 11:45
							</view>
							<view class="dingdan-txt">
								订单单号 12545435434134 复制
							</view>
						</view>
						<view class="r-b">
							<view class="tips">
								展开信息
							</view>
							<image src="/static/supermarket/index/xia_icon.png" style="width: 12rpx;height: 6rpx;"
								mode="">
							</image>
						</view>
					</view>
				</view>
				<view class="btn-btn" v-if="selectedIndices1 != 1">
					<view class="btn1">
						取消订单
					</view>
					<view class="jiedan">
						接单
					</view>
				</view>
				<view class="btn-btn1" v-else>
					<view class="btn1">
						顾客已取餐
					</view>
				</view>
				<view class="btn-btn1" v-else>
					<view class="btn1">
						已送达
					</view>
				</view>
			</view>
		
			<view class="main-box" v-if="selectedIndices1 == 2">
				<view class="topbox">
					<view class="left-box">
						<view class="num-txt">
							<text style="color: #FF4F21;font-size: 28rpx;">#</text>16
						</view>
						<view class="song">
							申请时间 12-03 12:34
						</view>
					</view>
					<view class="status-txt">
						申请退款
					</view>
				</view>
			
				<view class="address-info">
					<view class="left-box">
						<view class="tt-txt">
							<view class="nicknametxt">
								马女士
							</view>
							<view class="numtxt">
								尾号3258
							</view>
						</view>
						<view class="bb-txt" v-if="code == 1 || code == 0">
							<view class="add-txt">
								收货地址 |
							</view>
							<view class="address-t">
								教学楼 3号教学楼 306
							</view>
						</view>
					</view>
					<view class="img-box">
						<image src="/static/supermarket/index/duanxin.png" style="width: 50rpx;height: 50rpx;" mode="">
						</image>
						<image src="/static/supermarket/index/phone-icon.png" style="width: 50rpx;height: 50rpx;"
							mode="">
						</image>
					</view>
				</view>
				<view class="beizubox">
					<view class="paotui" v-if="selectedIndices1 == 1 && code == 1">
						<view class="left-box">
							<view class="tt-txt">
								<view class="nicknametxt">
									跑腿已接单
								</view>
							</view>
							<view class="bb-txt">
								<view class="add-txt">
									王大帅
								</view>
							</view>
						</view>
						<view class="img-box">
							<image src="/static/supermarket/index/duanxin.png" style="width: 50rpx;height: 50rpx;"
								mode="">
							</image>
							<image src="/static/supermarket/index/phone-icon.png" style="width: 50rpx;height: 50rpx;"
								mode="">
							</image>
						</view>
					</view>
					<view class="textbox">
						<view class="tips-text">备注：</view>
						<view class="note-txt">
							我是广东来的，大哥们行行好不要放辣椒!我怕我怕我怕我吃不得我吃不得我吃不得求求你
						</view>
					</view>
					<view class="bombox">
						<view class="num-s">
							12件商品
						</view>
						<view class="yuji">
							预计收入 ￥21.23
						</view>
					</view>
					<view class="dingdaninfo">
						<view class="left-box">
							牛肉面单人餐(小份)
						</view>
						<view class="right-box">
							<view class="cheng">
								x1
							</view>
							<view class="price">
								￥15
							</view>
						</view>
					</view>
				</view>
			
				<view class="btn-box">
					<view class="top-box">
						<view class="l-b">
							<view class="xidan-txt">
								下单时间 12-05 11:45
							</view>
							<view class="dingdan-txt">
								订单单号 12545435434134 复制
							</view>
						</view>
						<view class="r-b">
							<view class="tips">
								展开信息
							</view>
							<image src="/static/supermarket/index/xia_icon.png" style="width: 12rpx;height: 6rpx;"
								mode="">
							</image>
						</view>
					</view>
				</view>
				<view class="btn-btn">
					<view class="jujue">
						拒绝
					</view>
					<view class="tuikuan">
						确认退款
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 返回主页 -->
		<!-- 	<view class="gohome" @click="goHome()">
			<image src="/static/login/tohome.png" mode="aspectFit"></image>
		</view> -->
		<!-- 缺省 -->
		<view class="default-height"></view>
		<ikz-tabbar :show-data="tabbar_Data"></ikz-tabbar>

		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="popbox">
				<view class="pp_top">
					<view class="ll-txt" @click="canceltxt">
						取消
					</view>
					<view class="cen-txt">
						配送设置
					</view>
					<view class="enter-txt" @click="entertxt">
						确定
					</view>
				</view>

				<view class="center-box">
					<view class="tab-item" v-for="(item,index) in poplist" :key="index" @click="pophah(item,index)">
						<view :class="['tab-item', { selected: selectedIndices2 == index ? 'selected':''}]">
							{{ item.cate_name }}
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import ikzLoading from '@/pages/Component/Public/Loading/loading.vue';
	import ikzTabbar from '@/pages/Component/Public/tab-bar/tab-bar.vue';
	import ikz from '@/pages/Common/tools.js';
	var app = getApp( );
	const screenHeight = uni.getSystemInfoSync( ).screenHeight;
	export default {
		components: {
			ikzLoading,
			ikzTabbar
		},
		onPageScroll( e ) {
			let that = this;

		},
		data( ) {
			return {
				tabbar_Data: {
					type: 0,
					list: [ {
							title: "订单",
							url: "/pages/Component/supermarket/Program/index/index",
							iconPath: "/static/supermarket/tabbar/index_task.png",
							selectedIconPath: "/static/supermarket/tabbar/index.png",
							status: 1,
						},
						{
							title: "商铺",
							url: "/pages/Component/supermarket/Program/merchant/merchant",
							iconPath: "/static/supermarket/tabbar/marer_task.png",
							selectedIconPath: "/static/supermarket/tabbar/marer.png",
							status: 1,
						},
						{
							title: "我的",
							url: "/pages/Component/supermarket/Program/user/index",
							iconPath: "/static/supermarket/tabbar/user_task.png",
							selectedIconPath: "/static/supermarket/tabbar/user.png",
							status: 1,
						},
					]
				},
				loading_css: {
					display: 'flex'
				},
				MPPR: 0,
				adminImgPath: app.globalData.adminImgPath,
				menuTotal: 0,
				menuList: [ ],
				recommend_data: [ ],
				swiperHeight: 0,
				currentIndex: 0,
				remPage: 1,
				remHasMore: false,
				page: 1,
				service_img: '/static/supermarket/index/mar_bg.png',
				yuelist: [ {
					cate_name: '待处理'
				}, {
					cate_name: '历史订单'
				} ],
				tablist: [ {
					cate_name: '待接单'
				}, {
					cate_name: '进行中'
				}, {
					cate_name: '退款'
				} ],
				
				tablist1: [ {
					cate_name: '全部'
				},{
					cate_name: '退款'
				} ],
				selectedIndices: 0,
				selectedIndices1: 0,
				selectedIndices2: 0,
				code: 1, //0 待跑腿接单; 1 配送中; 2 待顾客取货
				poplist: [ {
					cate_name: '跑腿配送'
				}, {
					cate_name: '商家自配'
				} ],
				windowHeight: 0,
				selectedIndiceslisi:0,//历史订单
			}
		},
		onLoad( ) {
			// #ifdef MP
			//小程序下空出胶囊距离
			let m = uni.getMenuButtonBoundingClientRect( );
			this.MPPR = m.width + 8
			// #endif
			this.getInfo( res => {
				this.loading_css.display = 'none';
			} )
			// this.$refs.storeList.getStoreList()
			this.getRecommend( )
			var _this = this
			uni.getSystemInfo( {
				success: function( res ) {
					_this.windowHeight = res.windowHeight - 229 + 'px';
					console.log( _this.windowHeight, '屏幕高度' );
				}
			} )
		},
		onShareAppMessage( ) {
			return {
				title: app.globalData.share_info.share_title,
				path: '/xyb/pages/Component/supermarket/Program/index/index',
				imageUrl: app.globalData.share_info.share_img,
			}
		},
		onReachBottom( ) {
			this.$refs.storeList.onBottom( )
		},
		onPullDownRefresh( ) {
			this.getInfo( res => {
				uni.stopPullDownRefresh( );
			} )
			// this.$refs.storeList.getStoreList()
			this.getRecommend( )
		},
		methods: {
			tosearch( ) {
				uni.navigateTo( {
					url: '/pages/Component/supermarket/Program/search/search'
				} )
			},
			entertxt( ) {
				this.$refs.popup.close( )
			},
			canceltxt( ) {
				this.$refs.popup.close( )
			},
			pophah( item, index ) {
				console.log( index, '每一项1' );
				this.selectedIndices2 = index
			},
			poppei( ) {
				this.$refs.popup.open( 'bottom' )
			},
			hah( item, index ) {
				console.log( index, '每一项' );
				this.selectedIndices = index
			},
			// 待处理
			tabhah( item, index ) {
				console.log( index, '每一项1' );
				this.selectedIndices1 = index
			},
			// 历史订单
			tab1hah(item,index){
				console.log( index, '每一项1' );
				this.selectedIndiceslisi = index
			},
			// 返回主页
			goHome( ) {
				uni.switchTab( {
					url: "/pages/Home/index"
				} )
			},
			//动态设置swiper的高度
			setSwiperHeight( ) {
				let query = uni.createSelectorQuery( ).in( this );
				query.selectAll( ".swiper-box" ).boundingClientRect( );
				query.exec( ( res ) => {
					this.swiperHeight = res[ 0 ][ this.currentIndex ].height;
				} )
			},
			// 跳转商品详情
			toStore( id ) {
				uni.navigateTo( {
					url: '/pages/Component/supermarket/Program/store/index?id=' + id
				} )
			},
			// 跳转店铺列表
			toList( id, tit ) {
				uni.navigateTo( {
					url: '/pages/Component/supermarket/Program/search/list?id=' + id + '&title=' + tit
				} )
			},
			// 获取首页信息
			getInfo( fn ) {
				var path = '/xyb/supermarket/index/index';
				ikz.requestPost( path, {}, res => {
					if ( res.data.code ) {
						var newArr = [ ]
						for ( let i = 0; i < res.data.data.supermarket_category_list.length; i += 8 ) {
							newArr.push( res.data.data.supermarket_category_list.slice( i, i + 8 ) );
						}
						this.menuList = newArr
						this.$nextTick( ( ) => {
							this.setSwiperHeight( );
						} );
					} else {
						uni.showModal( {
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function( res ) {}
						} );
					}
					fn( )
				} )
			},
			// 获取推荐商家
			getRecommend( ) {
				var path = '/xyb/supermarket/index/businsess_list';
				var data = {
					recommend: 1,
					page: this.remPage,
					limit: 10
				};
				ikz.requestPost( path, data, res => {
					if ( res.data.code ) {
						let list = res.data.data.data
						this.remHasMore = this.remPage < res.data.data.total / 10 ? true : false
						this.recommend_data = this.remPage === 1 ? list : [ ...this.recommend_data, ...list ];
					} else {
						uni.showModal( {
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function( res ) {}
						} );
					}
				} )
			},
			scrolltolower( e ) {
				if ( this.remHasMore ) {
					this.remPage += 1
					this.getRecommend( )
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f8f8f8;
	}

	.ikz-top-bg {
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: -1;
	}

	.popbox {
		width: 750rpx;
		height: 520rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 28rpx 30rpx;
		box-sizing: border-box;

		.pp_top {
			width: 100%;
			height: 44rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.ll-txt {
				width: 70rpx;
				height: 44rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #666666;
				text-align: left;
			}

			.cen-txt {
				width: 120rpx;
				height: 44rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #000000;
				text-align: center;
			}

			.enter-txt {
				width: 60rpx;
				height: 44rpx;
				font-weight: 400;
				font-size: 30rpx;
				color: #247EFF;
				text-align: center;
			}
		}

		.center-box {
			width: 100%;
			height: 200rpx;
			margin-top: 88rpx;

			.tab-item {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-weight: 400;
				font-size: 30rpx;
				color: #666666;

				.selected {
					/* 选中时的样式，比如背景色为红色 */
					color: #000000;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
				}
			}
		}
	}

	.ikz-top-bg-img {
		width: 750rpx;
		height: 350rpx;
	}

	.title_txt {
		width: 522rpx;
		height: 62rpx;
		margin-top: 100rpx;
		margin-left: 34rpx;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.left_box {
			width: 306rpx;
			height: 62rpx;
			display: flex;
			background-color: #247EFF;
			align-items: center;
			justify-content: space-between;
			padding: 4rpx;
			box-sizing: border-box;

			.tab-item {
				width: 142rpx;
				height: 58rpx;
				background-color: #247EFF;
				border-radius: 12rpx;
				line-height: 62rpx;
				text-align: center;
				font-weight: 400;
				font-size: 26rpx;
				color: #B8D5FF;

				.selected {
					/* 选中时的样式，比如背景色为红色 */
					color: #000000;
					background-color: #fff;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
				}
			}
		}

		// font-weight: 500;
		// font-size: 32rpx;
		// color: #067CFF;
		// text-align: center;

	}

	.tabbox {
		width: 100%;
		height: 120rpx;
		padding: 0 46rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.le-box {
			width: 404rpx;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.tab-item {
				width: 96rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				font-weight: 400;
				font-size: 28rpx;
				color: #247EFF;

				.selected {
					/* 选中时的样式，比如背景色为红色 */
					color: #067CFF;
					font-weight: bold;
					font-size: 32rpx;
					border-bottom: 1rpx solid #067CFF;
				}
			}
		}
	}
	
	.tabbox1 {
		width: 100%;
		height: 120rpx;
		padding: 0 46rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	
		.le-box {
			width: 224rpx;
			height: 120rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
	
			.tab-item {
				width: 64rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				font-weight: 400;
				font-size: 28rpx;
				color: #247EFF;
	
				.selected {
					/* 选中时的样式，比如背景色为红色 */
					color: #067CFF;
					font-weight: bold;
					font-size: 32rpx;
					border-bottom: 1rpx solid #067CFF;
				}
			}
		}
	}

	.gohome {
		position: fixed;
		top: 60%;
		right: 36rpx;
		z-index: 100;

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.b-b {
		position: relative;
	}

	.b-b:after,
	.b-t:after {
		position: absolute;
		z-index: 3;
		left: 0;
		right: 0;
		height: 0;
		content: '';
		transform: scaleY(.5);
		border-bottom: 1px solid #E4E7ED;
	}

	.b-b:after {
		bottom: 0;
	}

	.b-t:after {
		top: 0;
	}

	.container {
		margin: 0 15px;
	}

	.margin-top {
		margin-top: 12px;
	}

	.head-box {
		padding: 14px 0;
		/* #ifdef MP */
		padding-top: 2px;
		/* #endif */
		position: relative;
		z-index: 3;

		.navbar {
			position: sticky;
			top: 0;
			height: var(--status-bar-height);
		}

		.container {
			height: 45rpx;
			position: relative;

			.home-logo {
				width: 45rpx;
				height: 45rpx;
				position: absolute;
				top: 0;
				left: 0;
			}

			.navbar-title {
				font-size: 29rpx;
				line-height: 45rpx;
				text-align: center;
				color: #333333;
			}
		}

	}

	.main-box {
		width: 690rpx;
		min-height: 626rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		margin: 0 auto;
		padding: 10rpx 16rpx;
		box-sizing: border-box;

		.topbox {
			width: 100%;
			height: 142rpx;
			border-bottom: 2rpx solid #E7E7E7;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left-box {
				width: 50%;
				height: 142rpx;

				.num-txt {
					width: 100%;
					height: 66rpx;
					font-weight: bold;
					font-size: 44rpx;
					color: #FF4F21;
					text-align: left;
				}

				.song {
					width: 100%;
					height: 38rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #222222;
					text-align: left;
				}
			}

			.status-txt {
				// width: 78rpx;
				height: 38rpx;
				font-weight: 500;
				font-size: 26rpx;
				color: #222222;
				text-align: right;
			}
		}

		.address-info {
			width: 100%;
			height: 142rpx;
			border-bottom: 2rpx solid #E7E7E7;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left-box {
				width: 70%;
				height: 142rpx;
				display: flex;
				align-items: left;
				flex-direction: column;
				justify-content: center;

				.tt-txt {
					width: 70%;
					height: 44rpx;
					display: flex;
					align-items: center;
					margin-top: 26rpx;

					.nicknametxt {
						width: 90rpx;
						height: 44rpx;
						font-weight: bold;
						font-size: 30rpx;
						color: #222222;
						text-align: left;
						line-height: 44rpx;
					}

					.numtxt {
						width: 110rpx;
						height: 38rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #222222;
						text-align: left;
						line-height: 44rpx;
					}
				}

				.bb-txt {
					width: 100%;
					height: 34rpx;
					display: flex;
					align-items: center;
					margin-top: 16rpx;

					.add-txt {
						height: 34rpx;
						font-weight: 400;
						font-size: 22rpx;
						color: #222222;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.address-t {
						height: 34rpx;
						font-weight: 400;
						font-size: 22rpx;
						color: #222222;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-left: 4rpx;
					}
				}
			}


			.img-box {
				width: 30%;
				height: 142rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
			}
		}

		.beizubox {
			width: 100%;
			min-height: 216rpx;
			border-bottom: 2rpx solid #E7E7E7;
			padding: 24rpx 0 30rpx 0;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: column;

			.paotui {
				width: 100%;
				height: 120rpx;
				display: flex;
				margin-bottom: 20rpx;

				.left-box {
					width: 70%;
					height: 120rpx;

					.tt-txt {
						width: 70%;
						height: 44rpx;
						display: flex;
						align-items: center;
						margin-top: 26rpx;

						.nicknametxt {
							width: 250rpx;
							height: 44rpx;
							font-weight: bold;
							font-size: 30rpx;
							color: #222222;
							text-align: left;
							line-height: 44rpx;
						}

						.numtxt {
							width: 110rpx;
							height: 38rpx;
							font-weight: 400;
							font-size: 26rpx;
							color: #222222;
							text-align: left;
							line-height: 44rpx;
						}
					}

					.bb-txt {
						width: 100%;
						height: 34rpx;
						display: flex;
						align-items: center;
						margin-top: 16rpx;

						.add-txt {
							height: 34rpx;
							font-weight: 400;
							font-size: 22rpx;
							color: #222222;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}

						.address-t {
							height: 34rpx;
							font-weight: 400;
							font-size: 22rpx;
							color: #222222;
							text-align: left;
							font-style: normal;
							text-transform: none;
							margin-left: 4rpx;
						}
					}
				}

				.img-box {
					width: 30%;
					height: 142rpx;
					display: flex;
					align-items: center;
					justify-content: space-around;
				}

			}

			.textbox {
				width: 100%;
				min-height: 96rpx;
				background: #F5F5F5;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				padding: 10rpx;
				box-sizing: border-box;
				display: flex;
				margin-bottom: 22rpx;

				.tips-text {
					width: 140rpx;
					height: 38rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #999999;
					text-align: left;
				}

				.note-txt {
					// width: 100%;
					// min-height: 96rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #999999;
					text-align: left;
				}
			}

			.bombox {
				width: 654rpx;
				height: 44rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.num-s {
					width: 50%;
					height: 44rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: #FF4F21;
					text-align: left;
				}

				.yuji {
					width: 50%;
					height: 44rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: #FF4F21;
					text-align: right;
				}
			}

			.dingdaninfo {
				width: 100%;
				min-height: 34rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 30rpx;

				.left-box {
					width: 70%;
					height: 34rpx;
					font-weight: 400;
					font-size: 22rpx;
					color: #222222;
					text-align: left;

				}

				.right-box {
					width: 30%;
					height: 34rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.cheng {
						height: 34rpx;
						font-weight: 400;
						font-size: 22rpx;
						color: #222222;
						text-align: left;
					}

					.price {
						height: 34rpx;
						font-weight: 400;
						font-size: 22rpx;
						color: #222222;
						text-align: right;
					}
				}
			}
		}

		.btn-box {
			width: 100%;
			min-height: 95rpx;
			padding: 20rpx 18rpx 28rpx 18rpx;
			box-sizing: border-box;

			.top-box {
				width: 100%;
				height: 76rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.l-b {
					width: 70%;
					height: 76rpx;
					font-weight: 300;
					font-size: 22rpx;
					color: #666666;
					text-align: left;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.xidan-txt {
						font-weight: 300;
						font-size: 22rpx;
						color: #666666;
						text-align: left;
					}

					.dingdan-txt {
						font-weight: 300;
						font-size: 22rpx;
						color: #666666;
						text-align: left;
					}
				}

				.r-b {
					width: 30%;
					height: 76rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.tips {
						font-weight: 400;
						font-size: 24rpx;
						color: #000000;
						text-align: left;
						margin-right: 5rpx;
					}
				}
			}


		}

		.btn-btn1 {
			width: 100%;
			height: 76rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.btn1 {
				width: 100%;
				height: 76rpx;
				background: #247EFF;
				border-radius: 34rpx 34rpx 34rpx 34rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 76rpx;
			}
		}

		.btn-btn {
			width: 100%;
			height: 76rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.jujue{
				width: 320rpx;
				height: 76rpx;
				background: #F5F5F5;
				border-radius: 34rpx 34rpx 34rpx 34rpx;
				text-align: center;
				line-height: 76rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #AFAFAF;
			}
			
			.tuikuan{
				width: 320rpx;
				height: 76rpx;
				background: #FF4F21;
				border-radius: 34rpx 34rpx 34rpx 34rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 76rpx;
			}

			.btn1 {
				width: 320rpx;
				height: 76rpx;
				background: #F5F5F5;
				border-radius: 34rpx 34rpx 34rpx 34rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #AFAFAF;
				text-align: center;
				line-height: 76rpx;
			}

			.jiedan {
				width: 320rpx;
				height: 76rpx;
				background: #FF4F21;
				border-radius: 34rpx 34rpx 34rpx 34rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 76rpx;
			}
		}
	}
</style>